import React, { useState, useEffect, useRef } from "react";

import { apiGetHomeRecommend } from "@/api/index";

import ReleaseComment from "@/components/release-comment/release-comment";

import "./home.less";

const Home = () => {
  interface get {
    [key: string]: any;
  }
  const render = useState(0)[1];
  const page: any = useRef({
    articleList: [], // 文章列表
    timer: null, // 定时器
    article: {}, // 当前显示全文的文章
    articleIndex: 0, // 当前显示文章在列表的索引
    fixedOper: false, // 是否显示底部定位操作
  });
  const s = () => Math.random();
  // 判断显示全文的时候底部操作是否显示
  const fixedOper = () => {
    clearTimeout(page.current.timer);
    const { articleIndex } = page.current;
    // console.log(e);
    let dom: any = document.querySelectorAll(
      ".home-page .ul-content .li .oper"
    )[articleIndex];
    const rect = dom.getBoundingClientRect();
    // console.log(rect);
    const yInView = rect.top < window.innerHeight && rect.bottom > 0;
    const xInView = rect.left < window.innerWidth && rect.right > 0;
    console.log(yInView && xInView);
    if (yInView && xInView) {
      page.current.fixedOper = false;
    } else {
      page.current.fixedOper = true;
    }
    if (!page.current.articleList[articleIndex].hasCheck) {
      page.current.fixedOper = false;
    }
    // console.log(page.current.fixedOper);
    render(s);
    // return yInView && xInView;
  };
  // 显示全文
  const showAll = (index: number) => {
    page.current.articleList[index].hasCheck = true;
    page.current.article = page.current.articleList[index];
    page.current.articleIndex = index;
    render(s);
    document.addEventListener("scroll", fixedOper);
    page.current.timer = setTimeout(() => {
      fixedOper(); // 点击显示全文时先判断是否要显示底部操作
    }, 20);
  };
  // 收起全部显示
  const pickUp = (index: number) => {
    console.log(123);
    document.removeEventListener("scroll", fixedOper);
    page.current.articleList[index].hasCheck = false;
    page.current.articleList[index].play = false;
    page.current.articleList[index].playIcon = null;
    page.current.articleList[index].playIconPause = false;
    page.current.fixedOper = false;
    render(s);
    // page.current.timer = setTimeout(() => {

    // }, 20);
  };
  // 点击播放视频
  const playVideo = (index: number) => {
    if (!page.current.articleList[index].play) {
      // console.log("第一次点击");
      page.current.articleList[index].playIcon = true;
      page.current.articleList[index].play = true;
      render(s);
      page.current.timer = setTimeout(() => {
        page.current.articleList[index].playIcon = false;
        render(s);
      }, 400);
    }
  };
  // 播放暂停
  const onPause = (index: number) => {
    // console.log("暂停了");
    clearTimeout(page.current.timer);
    page.current.articleList[index].playIconPause = true;
    render(s);
    page.current.timer = setTimeout(() => {
      page.current.articleList[index].playIconPause = false;
      render(s);
    }, 400);
  };
  // 点击继续
  const onPlay = (index: number) => {
    // console.log("播放了");
    clearTimeout(page.current.timer);
    page.current.articleList[index].playIcon = true;
    render(s);
    page.current.timer = setTimeout(() => {
      page.current.articleList[index].playIcon = false;
      render(s);
    }, 400);
  };
  // 格式化点赞数量
  const formatAgree = (index: number) => {
    let count: number | string | any =
      page.current.articleList[index].target.voteup_count;

    if (count > 1000) {
      count = (count / 10000).toFixed(1) + "万";
    }
    // console.log(count);
    return count;
  };

  // effect
  const clearup = () => {
    clearTimeout(page.current.timer);
  };
  useEffect(() => {
    apiGetHomeRecommend().then((res: any) => {
      console.log(res.data);
      page.current.articleList = res.data;
      render(s);
    });

    return clearup();
  }, [render]);

  return (
    <div className="home-page">
      <section className="section">
        {/* 顶部导航切换 */}
        <ul className="ul-box">
          <li className="li">推荐</li>
          <li className="li">关注</li>
          <li className="li">热榜</li>
        </ul>

        <ul className="ul-content">
          {page.current.articleList.map((i: any, index: number) => {
            return (
              <li className="li" key={i.id}>
                {/* 标题 */}
                <h2 className="title">
                  {i.target.title || i.target.question.title}
                </h2>
                {/* */}
                <div className="content-box">
                  {/* 左侧图片 */}
                  {/* 图片时显示的图片 */}
                  {i.target.image_url && !i.hasCheck && (
                    <div className="img-box" onClick={() => showAll(index)}>
                      <img
                        style={{ width: "100%" }}
                        src={i.target.image_url}
                        alt=""
                      />
                    </div>
                  )}
                  {/* 视频时显示的图片 */}
                  {i.target.thumbnail_extra_info && !i.hasCheck && (
                    <div
                      className="img-box video-box"
                      onClick={() => showAll(index)}
                    >
                      <img
                        style={{ width: "100%" }}
                        src={i.target.thumbnail_extra_info.url}
                        alt=""
                      />
                    </div>
                  )}
                  {/* 左侧图片--end */}

                  {/* 右侧内容 */}
                  {i.hasCheck ? (
                    <>
                      {i.target.thumbnail_extra_info ? (
                        <div className="video-play-box">
                          {/* 视频播放 */}
                          <div className="play-box">
                            {/* <span
                              className={`iconfont iconbofang1 ${
                                i.play ? "iconbofang1-none" : ""
                              } `}
                            ></span> */}
                            <span
                              className={`iconfont  iconbofang1 ${
                                i.play ? "hide" : ""
                              } ${i.playIcon ? "iconbofang1-none" : ""} `}
                            ></span>
                            <span
                              className={`iconfont hide iconzanting ${
                                i.playIconPause ? "iconzanting-none" : ""
                              } `}
                            ></span>
                            <video
                              onPause={() => onPause(index)}
                              onPlay={() => onPlay(index)}
                              onClick={() => playVideo(index)}
                              autoPlay
                              className="video"
                              poster={i.target.thumbnail_extra_info.url}
                              controls={true}
                              src={
                                i.play
                                  ? i.target.thumbnail_extra_info.playlist.sd
                                      .url
                                  : null
                              }
                            >
                              您的浏览器不支持 video 播放。
                            </video>
                          </div>
                          <p className="text">{i.target.content}</p>
                        </div>
                      ) : (
                        <p
                          className="content"
                          dangerouslySetInnerHTML={{
                            __html: i.target.content,
                          }}
                        ></p>
                      )}
                    </>
                  ) : (
                    <p className="content ">
                      {/* 文章内容 */}
                      {i.target.thumbnail_extra_info ? (
                        <span
                          className="content-vedio hover-color"
                          onClick={() => showAll(index)}
                        >
                          <span>{i.target.description}</span>
                          <span className="all-content">
                            <span onClick={() => showAll(index)}>阅读全文</span>
                            <span
                              className="iconfont iconxialajiantou"
                              style={{ marginLeft: 2 }}
                            ></span>
                          </span>
                        </span>
                      ) : (
                        <>
                          <span
                            onClick={() => showAll(index)}
                            className="hover-color"
                            dangerouslySetInnerHTML={{
                              __html: i.target.excerpt,
                            }}
                          ></span>
                          {i.target.excerpt &&
                            i.target.excerpt.indexOf("&hellip;") !== -1 && (
                              <span className="all-content">
                                <span onClick={() => showAll(index)}>
                                  阅读全文
                                </span>
                                <span
                                  className="iconfont iconxialajiantou"
                                  style={{ marginLeft: 2 }}
                                ></span>
                              </span>
                            )}
                        </>
                      )}
                    </p>
                  )}
                  {/* 右侧内容 */}
                </div>

                {/* 点赞分享等 */}
                <div className="oper">
                  <div>
                    <span className="text agree">
                      赞同 {formatAgree(index)}
                    </span>
                    <span className="text ">
                      <i className="iconfont iconxiaoxi-"></i>
                      {i.target.comment_count} 评论
                    </span>
                    <span className="text">
                      <i className="iconfont iconfenxiang"></i>分享
                    </span>
                    <span className="text">
                      <i className="iconfont iconshoucang"></i>收藏
                    </span>
                    <span className="text">
                      <i className="iconfont iconxihuan"></i>喜欢
                    </span>
                  </div>
                  {i.hasCheck && (
                    <div className="pick-up" onClick={() => pickUp(index)}>
                      <span style={{ marginRight: 4 }}>收起</span>
                      <span className="iconfont iconshangla"></span>
                    </div>
                  )}
                </div>
                {/* 评论部分 */}
                <div className="comment-box">
                  <div className="title-box">
                    <p className="left">880条评论</p>
                    <p className="iconfont iconqiehuan-">切换为时间排序</p>
                  </div>
                  <p className="jx-conmment">精选评论（64）</p>
                  <ul className="content-box">
                    <li className="item">
                      <div className="img-box"></div>
                      <div className="text-box">
                        <div className="top">
                          <p>dad asd </p>
                          <p>06-28</p>
                        </div>
                        <p className="middle">
                          我觉得鱼玩的好了，真的是很恶心对面的存在了，打不死，跑的还快哈哈唉
                        </p>
                        <div className="bottom">
                          <span className="iconfont icondianzan"> 5101</span>
                          <span className="iconfont iconxiaoxi-">查看回复</span>
                          <div className="self-oper">
                            <span className="iconfont iconfanhui">回复</span>
                            <span className="iconfont iconcai">踩</span>
                            <span className="iconfont iconjubao">举报</span>
                          </div>
                        </div>
                      </div>
                    </li>
                  </ul>
                  {/* 底部评论 */}
                  <div className="comment-release">
                    <ReleaseComment></ReleaseComment>
                  </div>
                </div>
                {/*  */}
              </li>
            );
          })}
        </ul>
      </section>
      <aside className="aside"></aside>

      {/* 收起查看全部内容的fixed定位 */}
      <div
        className={`oper-fixed-box ${
          page.current.fixedOper ? "oper-fixed-box-show" : ""
        }`}
      >
        <div className="oper-fixed">
          <div className="oper-fixed-content">
            <div className="oper">
              <span className="text agree">赞同 </span>
              <span className="text ">
                <i className="iconfont iconxiaoxi-"></i>
                评论
              </span>
              <span className="text">
                <i className="iconfont iconfenxiang"></i>分享
              </span>
              <span className="text">
                <i className="iconfont iconshoucang"></i>收藏
              </span>
              <span className="text">
                <i className="iconfont iconxihuan"></i>喜欢
              </span>
            </div>
            <div
              className="pick-up"
              onClick={() => pickUp(page.current.articleIndex)}
            >
              <span style={{ marginRight: 4 }}>收起</span>
              <span className="iconfont iconshangla"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Home;
